<template>
    <div class="cooperative">
        <div class="cooperative-tit text-center">合作企业</div>
        <div class="cooperative-img container-justf">

            <div class="co1 container-align mar-center">

                <div :class="index === 1 ? 'co3' : 'co2'" v-for="(i, index) in com" :key="index">
                    <img :src="i.img" alt=""/>
                </div>
                <!--<div class="co3"></div>
                <div class="co4"></div>-->

            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: "Cooperative",
    data () {
        return {
            com: this.$root.index.companyList
        }
    }
}
</script>

<style scoped lang="scss">
.cooperative{
    &-tit{
        font-size: 30px;
        font-weight: 400;
        line-height: 42px;
        color: #000000;
        margin-bottom: 30px;
    }
    &-img{
        height: 416px;
        background-image: url("../assets/img/4.png");
        background-size: cover;
    }
    .co1{
        width: 1200px;
        justify-content: center;
    }
    .co3{
        width: 428px;
        height: 196px;
        // background-color: #FFFFFF;
        border-radius: 6px;
        overflow: hidden;
        margin-right: 40px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .co2, .co4{
        width: 296px;
        height: 136px;
        // background-color: #FFFFFF;
        border-radius: 6px;
        overflow: hidden;
        margin-right: 40px;
        &:last-child{
            margin-right: 0;
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>